<!--  -->
<template>
  <div class="page">
    <div class="yemian">
      <div class="title">供应商详情</div>
      <div class="btn">
        <el-button type="primary" @click="editsupply()"
          >编辑供应商</el-button
        >
      </div>
      <div class="biao">
        <div class="caidan">
          <div class="son">供应商ID</div>
          <div class="son">{{ d_list.supplierId }}</div>
        </div>
        <div class="caidan">
          <div class="son">联系人</div>
          <div class="son">{{ d_list.supplierOwnerName }}</div>
        </div>
        <div class="caidan">
          <div class="son">供应区域</div>
          <div class="son">{{ d_list.supplyAreas }}</div>
        </div>
        <div class="caidan">
          <div class="son">地址</div>
          <div class="son">{{ d_list.address }}</div>
        </div>
        <div class="caidan">
          <div class="son">供应商名称</div>
          <div class="son">{{ d_list.company }}</div>
        </div>
        <div class="caidan">
          <div class="son">手机号</div>
          <div class="son">{{ d_list.mobile }}</div>
        </div>
        <div class="caidan">
          <div class="son">供应类别</div>
          <div class="son">{{ d_list.typeName }}</div>
        </div>
        <div class="caidan">
          <div class="son">结算周期</div>
          <template>
            <div class="son" v-if="d_list.cycle == 0">周</div>
            <div class="son" v-if="d_list.cycle == 1">月</div>
            <div class="son" v-if="d_list.cycle == 2">季</div>
          </template>
        </div>
        <div class="caidan">
          <div class="son">供应商简称</div>
          <div class="son">{{ d_list.supplierNameShort }}</div>
        </div>
        <div class="caidan">
          <div class="son">微信号</div>
          <div class="son">{{ d_list.supplierWechat }}</div>
        </div>
        <div class="caidan">
          <div class="son">供应商级别</div>
          <template>
            <div class="son" v-if="d_list.levelId == 1">一级供应商</div>
            <div class="son" v-if="d_list.levelId == 2">二级供应商</div>
            <div class="son" v-if="d_list.levelId == 3">三级供应商</div>
          </template>
        </div>
        <div class="caidan">
          <div class="son">审核状态</div>
          <template>
            <div class="son" v-if="d_list.status == 0">初审中</div>
            <div class="son" v-if="d_list.status == 1">补充资料</div>
            <div class="son" v-if="d_list.status == 2">终审中</div>
            <div class="son" v-if="d_list.status == 3">初审不通过</div>
            <div class="son" v-if="d_list.status == 4">终审不通过</div>
            <div class="son" v-if="d_list.status == 5">审核通过</div>
          </template>
          <!-- <div class="son">{{d_list.status}}</div> -->
        </div>
      </div>
      <div class="tu">
        <!--   <div class="tu_list"
             v-for="(item,index) in urls"
             :key="index">
          <span>{{item.tit}}</span>
          <el-image class="zizhi"
                    style="width: 100px; height: 100px"
                    :src="item.tu"
                    load="fuck"
                    :preview-src-list="getSrcList(index)">
          </el-image>
        </div> -->
        <div class="tu_list">
          <div>营业执照</div>
          <el-image
            class="zizhi"
            style="width: 100px; height: 100px"
            :src="img"
            load="fuck"
            lazy
            :preview-src-list="getSrc(0)"
          >
          </el-image>
        </div>
        <div class="tu_list">
          <div>法人代表身份证人像面</div>
          <el-image
            class="zizhi"
            style="width: 100px; height: 100px"
            :src="img1"
            load="fuck"
            lazy
            :preview-src-list="getSrc(1)"
          >
          </el-image>
        </div>
        <div class="tu_list">
          <div>法人代表身份证国徽面</div>
          <el-image
            class="zizhi"
            style="width: 100px; height: 100px"
            :src="img2"
            load="fuck"
            lazy
            :preview-src-list="getSrc(2)"
          >
          </el-image>
        </div>
        <div class="tu_list">
          <div>食品流通许可证</div>
          <el-image
            class="zizhi"
            style="width: 100px; height: 100px"
            :src="img3"
            load="fuck"
            lazy
            :preview-src-list="getSrc(3)"
          >
          </el-image>
        </div>
        <!--           <div class="tu_list">
          <div>营业执照</div>
          <el-image class="zizhi"
                    style="width: 100px; height: 100px"
                    :src="d_list.runLicense"
                    load="fuck"
                    :preview-src-list="url">
          </el-image>
        </div> -->
      </div>
      <div class="ziliao" v-if="this.zhi">
        <el-button class="anniu" @click="shenhe('flase')" type="info"
          >审核不通过</el-button
        >
        <el-button class="anniu" @click="shenhe('true')" type="primary"
          >审核通过</el-button
        >
      </div>
    </div>

    <el-dialog
      title="编辑供应商"
      :visible.sync="centerDialogVisible"
      width="80%"
      center
    >
      <div class="content">
        <el-form ref="d_list" :inline="true" :model="d_list" label-width="100px">
          <el-form-item label="供应商全称">
            <el-input v-model="d_list.company"></el-input>
          </el-form-item>
          <el-form-item label="供应类别">
            <el-select
            v-model="supplierTypeId"
            placeholder="请选择"
          >
            <el-option
              v-for="item in suppliertype"
              :key="item.id"
              :label="item.typeName"
              :value="item.id"
            />
          </el-select>
          </el-form-item>
          <el-form-item label="供应商简称">
            <el-input v-model="d_list.supplierNameShort"></el-input>
          </el-form-item>
          <el-form-item label="供应商级别">
            <el-select
            v-model="d_list.levelName"
            placeholder="请选择"
          >
            <el-option
              v-for="item in supplieylevel"
              :key="item.id"
              :label="item.levelName"
              :value="item.id"
            />
          </el-select>
          </el-form-item>
           <el-form-item label="联系人">
            <el-input v-model="d_list.supplierOwnerName"></el-input>
          </el-form-item>
         </el-form-item>       
          <el-form-item label="手机号">
            <el-input v-model="d_list.mobile"></el-input>
          </el-form-item>
           <el-form-item label="地址">
            <el-input v-model="d_list.address"></el-input>
          </el-form-item>
           <el-form-item label="微信号">
            <el-input v-model="d_list.supplierWechat"></el-input>
          </el-form-item>
          <el-form-item label="结算周期">
            <el-select v-model="cycle" placeholder="请选择">
              <el-option label="周" value="0"></el-option>
              <el-option label="月" value="1"></el-option>
              <el-option label="季度" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="供应区域">
          <el-select
            v-model="shen"
            placeholder="选择省"
            @change="qinqiu_shi({ zhi: 1, id: shen })"
          >
            <el-option
              v-for="item in diqu.shen"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-select
            v-model="shi"
            placeholder="选择市"
            @change="qinqiu_qu({ zhi: 2, id: shi })"
          >
            <el-option
              v-for="item in diqu.shi"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-select v-model="qu" multiple placeholder="选择区">
            <el-option
              v-for="item in diqu.qu"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        </el-form>
       <div class="msg">
        <div class="font">营业执照</div>
        <el-upload
          class="avatar-uploader"
          :action="dizhi"
          :headers="headers"
          :show-file-list="false"
          accept="image/png,image/jpg,image/jpeg"
          :on-success="licensesuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="img" :src="img" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
      <div class="msg">
        <div class="font">食品流通许可证</div>
        <el-upload
          class="avatar-uploader"
          :action="dizhi"
          :headers="headers"
          :show-file-list="false"
          accept="image/png,image/jpg,image/jpeg"
          :on-success="foodsuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="img3" :src="img3" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
      <div class="msg">
        <div class="font">法人代表身份证复印件正面</div>
        <el-upload
          class="avatar-uploader"
          :action="dizhi"
          :headers="headers"
          :show-file-list="false"
          accept="image/png,image/jpg,image/jpeg"
          :on-success="idfrontsuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="img1" :src="img1" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
      <div class="msg">
        <div class="font">法人代表身份证复印件反面</div>
        <el-upload
          class="avatar-uploader"
          :action="dizhi"
          :headers="headers"
          :show-file-list="false"
          accept="image/png,image/jpg,image/jpeg"
          :on-success="idreversesuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="img2" :src="img2" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editconfirm()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { gonyin_xq, gonyin_shenhe,diqu,gonyin_liebiao,gonyin_jibie,updateSupplier } from "@/api/gonyin.js";
import { getToken } from "@/utils/auth";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      d_list: "",
      tu_list: [],
      id: "",
      zhi: true,
      img: "",
      img1: "",
      img2: "",
      img3: "",
      centerDialogVisible: false,
      diqu: { shen: [], shi: [], qu: [] },
      suppliertype:[],
      supplieylevel:[],
      dizhi: "http://sun.xinlinju.net/oss/upload",
      shen:"",
      shi:"",
      qu:[],
      // token请求头
      headers: { token: getToken() },
      // 周期i
      cycle:"",
      supplierTypeId:0,
      levelId:""
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    getSrc(index) {
      // console.log(index, "666");
      return this.tu_list.slice(index).concat(this.tu_list.slice(0, index));
    },
    xq_list() {
      let data = { supplierId: this.id };
      gonyin_xq(data).then(res => {
        console.log(res)
        let zhi = res.data;
        (this.img = res.data.runLicense),
          (this.img1 = res.data.representativeLicense),
          (this.img2 = res.data.representativeLicenseReverse),
          (this.img3 = res.data.foodLicense);
        zhi.supplyAreas = zhi.supplyAreas.splice(2);
        zhi.supplyAreas = zhi.supplyAreas.join(",");
        this.supplierTypeId = zhi.supplierTypeId
        /* zhi.supplyAreas = JSON.parse(zhi.supplyAreas, ""); */
        console.log(res.data);
        this.d_list = zhi;
        
        this.tu_list = [
          res.data.runLicense,
          res.data.representativeLicense,
          res.data.representativeLicenseReverse,
          res.data.foodLicense
        ];
      });
    },
    shenhe(res) {
      console.log(res, res == "true" ? 0 : 1);
      let data = { supplierId: this.id, isPass: res == "true" ? 0 : 1 };
      gonyin_shenhe(data).then(res => {
        console.log(res, "66666666");
        this.$message({
          message:"操作成功",
          type:"success"
        })
        this.$router.push({ 
          name: "List"
        });
      });
    },
     // 地区查询
    region() {
      let data = { areaParentId: 1 };
      diqu(data).then(res => {
        console.log(res);
        this.diqu.shen = res.rows;
      });
    },
    qinqiu_shi(obj) {
      let data = { areaParentId: obj.id };
      diqu(data).then(res => {
        console.log(res);
        this.diqu.shi = res.rows;
        this.shi = "";
        this.qu = [];
      });
    },
    qinqiu_qu(obj) {
      let data = { areaParentId: obj.id };
      diqu(data).then(res => {
        this.diqu.qu = res.rows;
        this.qu = [];
      });
    },
    // 供应列表
    supliertype(){
      let data = {}
      gonyin_liebiao(data).then(res=>{
        console.log(res)
        this.suppliertype = res.rows
        this.supplierTypeId = res.rows.id
      })
    },
    // 供应级别
    supplierlevel(){
      let data ={}
      gonyin_jibie(data).then(res=>{
        console.log(res)
        this.supplieylevel = res.rows
      })
    },
    // 编辑供应商按钮
    editsupply(){
      this.centerDialogVisible = true
      let data ={supplierId:this.id}
      gonyin_xq(data).then(res=>{
        console.log(res)
        // this.qu = res.data.supplyAreas.splice(2)
        // this.shen = res.data.supplyAreas.splice(0,1).join(',')
        // this.shi = res.data.supplyAreas.join(',')
        this.supplierId = res.data.supplierId
        this.levelId = res.data.levelId
        // console.log(this.shen,this.qu)
        if(res.code===20000){
          if(res.data.cycle===0){
          this.cycle = "周"
         } else if(res.data.cycle===1){
          this.cycle = "月"
         }else if(res.data.cycle===2){
          this.cycle = "季度"
         }
        }
      })
      this.supliertype()
      this.supplierlevel()
    },
    // 编辑确认发送请求
    editconfirm(){
      let supplyArea =[]
      if(this.shen==='' || this.shi ===''){
        supplyArea = []
      }else{
        supplyArea = [
            this.shen,
            this.shi,
            ...this.qu
          ]
      };
      let data = {
        supplierId:this.id,
        company: this.d_list.company,
        supplierOwnerName:this.d_list.supplierOwnerName,
        mobile:this.d_list.mobile,
        supplierWechat:this.d_list.supplierWechat,
        supplierTypeId:this.supplierTypeId,
        levelId:this.levelId,
        supplyArea:supplyArea,
        address: this.d_list.address,
        cycle: this.cycle,
        runLicense: this.img,
        foodLicense: this.img3,
        representativeLicense: this.img1,
        representativeLicenseReverse: this.img2
      }
      updateSupplier(data).then(res=>{
        console.log(res)
        if(res.code===20000){
          this.$message({
          message: '编辑成功',
          type: 'success'
        });
        this.centerDialogVisible = false
        this.xq_list()
        }else{
          this.$message.error(res.msg)
        }
      })
    },
    // 营业执照
    licensesuccess(res, file) {
      console.log(res, file);
      this.img = res.extParams.path;
    },
    // 食品流通证
    foodsuccess(res, file) {
      console.log(res, file);
      this.img3 = res.extParams.path;
    },
    // 身份证正面
    idfrontsuccess(res, file) {
      console.log(res, file);
      this.img1 = res.extParams.path;
    },
    // 身份证反面
    idreversesuccess(res, file) {
      console.log(res, file);
      this.img2 = res.extParams.path;
    },
    beforeAvatarUpload(file) {
      console.log(file, "图片上传");
      const isJPG = file.type == "image/jpeg" || file.type == "image/png";
      const isLt2M = file.size / 1024 / 1024 < 4;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 或者PNG格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 4MB!");
      }
      return isJPG && isLt2M;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.id = this.$route.query.id;
    this.zhi = this.$route.query.zhi;
    this.xq_list();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.region()
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类

.page {
  display: flex;
  justify-content: center;
  .yemian {
    display: flex;
    width: 95%;
    flex-direction: column;
    .btn {
      text-align: right;
      margin-bottom: 30px;
    }
    .ziliao {
      display: flex;
      height: 100%;
      width: 100%;
      justify-content: center;
      div {
        margin-left: 50px;
        margin-top: 50px;
      }
      .anniu {
        margin-left: 50px;
        margin-top: 100px;
      }
    }
    .title {
      font-size: 20px;
      margin: 20px 0px 20px 20px;
    }
    .biao {
      display: flex;
      width: 100%;
      font-size: 12px;
      height: auto;
      flex-wrap: wrap;
      justify-content: center;
      /*   border: 0.1px #d3d3d3 solid; */
      .caidan {
        display: inline-flex;
        /*     border: 0.1px #d3d3d3 solid; */
        .son {
          display: flex;
          border: 0.1px#D3D3D3 solid;
          width: 150px;
          height: 60px;
          justify-content: center;
          align-items: center;
          /* padding: 20px 30px 20px 30px; */
        }
      }
    }
    .tu {
      display: flex;
      width: 100%;
      justify-content: space-around;
      margin-top: 100px;
      .tu_list {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: 50px;
      }
    }
  }
  .msg {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width:80%;
      margin:38px;
      .font {
        font-size: 17px;
        color: #606266;
      }
  }
  .avatar-uploader {
    border: 1px dashed #777676;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
</style>
